<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Choqolate 0.1a</title>
		<link rel="stylesheet" href="assets/style.css">
		<script language="JavaScript" src="assets/mootools.js"></script>
		<script language="JavaScript" src="assets/choqTextArray.js"></script>
		<script language="JavaScript" src="assets/choqDial.js"></script>
		<script language="JavaScript" src="assets/choqOrbital.js"></script>
	</head>
	
	
	<body>
		<div id="contents">
			<!-- Contents of the page itself go here-->
			<div class="logo"></div>	
			
			<h1>What's Choqolate?</h1>
			<p><b>Choqolate</b> is an in-house web project being developed by joint efforts of <a href="http://www.dysoft.co.uk">dynamo design studios</a> and <a href="http://micron.ic.cz">micron developers</a>. Choqolate aims to introduce <b>new, fresh and modern web elements</b>, delivering the next generation of user experience.
			
			<p>The elements you are about to see might not be novel, nor revolutionary and you might've seen them elsewhere, nonetheless, Choqolate wants to present them as a <em>standard</em>, something we will be using every day in web-based applications. Harnessing the power of the browser and scripting, Choqolate combines effects and functionality to produce a truly human web user interface.</p>
			
			<p>Most of these 'widgets' are not ready to be set free to the public, mainly because Choqolate is developed as an <b>in-house project</b>, which means their use in webpages requires lot of code rewrite, specific to every destination site. However, one day we might take our time to release it...</p>
			
			<p><b>Choqolate's philosophy is simple. Keyboard: Yes - Menus: No - Mouse: Maximum use - Control: Intuitive.</b></b>
			
			<h2>The Engine</h2>
			<p>Choqolate uses <b><a href="http://mootools.net">mootools</a> JS framework</b>, complies with <b>XHTML 1.0 Transitional</b> standard and is developed mainly for these mainstream web browsers:</p>
				<ul>
					<li>Mozilla Firefox 1.5+</li>
					<li>Opera 8+</li>
					<li>Internet Explorer 6.0+ *</li>
					<li><i><em>any browser with proper support of JavaScript 2.0, CSS 2.0 and 32-bit PNG</em></i></li>
				</ul>
				<p>Internet Explorer has problems with transparent PNGs, hence some, if not all, widgets will appear incorrectly</p>
			
			
			
			<h1>Widgets</h1>
			<p>These are all prototypes and are still in infant stage. Please treat them nicely, or they'll cry!.</p>
			
			<h2>Text Array</h2>
			<p>When rigged with an <b>AJAX</b> remote access ability, Text Array will allow the user to e.g. edit tables of data streamed from a MySQL table without having to refresh the page. Less annoyance, more work done. TextArray can in future take other inputs other than text (e.g. checkboxes, text arrays etc.)</p>
			<hr>
		
			<div id="output"></div>
			<div class="form">
				<input id="new">
				<div id="add"></div>
			</div>

			<br><br>
			
			<h2>Tuner Dial</h2>
			<p>Its use might not be at all obvious, especially when it can be replaced by a much easier-to-use horizontal/vertical slider. Still, some quantities might be better represented on a <b>circular scale</b>. Can you easily guess where 3/8 is on a conventional slider?</p>
			<p></p>
			<div id="dial">
				<div id="knob"></div>
				<div id="drag_knob"></div>
				<div id="dial_screen"><span id="dial_value"></span>%</div>
			</div>			
			
			
			<h2>Orbital</h2>
			<p>By rearranging items into a <b>seemingly 3-D toroidal space.</b>, users don't have to confront a huge row of choices, instead they can focus on the forefront items, whilst being able to shift the emphasis to a different selection at will.</p>
			<div id="orbital">
				<div id="orbital_navigation">
					<div id="orbital_left"></div><div id="orbital_right"></div>
				</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">one</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">two</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">three</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">four</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">five</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">six</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">seven</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">eight</div>
				<div class="orb"><img class="orb_image" src="assets/orb.png">nine</div>
			</div>
		</div>
		
		
		
		<!-- Footer - graphics, copyright etc.-->
		<p id="footer">v0.1a - copyright 2007 by micron developers and dynamo design studios - design by hay.</p>
	</body>
</html>